<template>
  <div class="content">
    <div class="con">
      <div class="selectList">
        <el-form ref="form" :model="form" label-width="80px">
          <!-- </el-form-item> -->
          <!-- <div class="search_con">
            <el-button  type="primary">出现天数</el-button>
            <el-input v-model="searchText" placeholder="≥"></el-input>
          </div> -->
          <div class="block">
            <el-date-picker
              size="small"
              v-model="searchTime"
              @change="selectTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              style="margin-right: 10px; background: #2c2c2d"
            >
            </el-date-picker>
          </div>
          <div class="search_con">
            <el-button type="primary">排序</el-button>
            <el-select
              v-model="thatSortList"
              @change="searchingBtn()"
              :disabled="isDisabled"
              collapse-tags
              size="mini"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in sortList"
                :key="index"
                :label="item.label"
                :value="item.sort"
              ></el-option>
            </el-select>
          </div>
          <div class="aside_bottom">
            <!-- <el-button size="mini" @click="clearSearch">重置</el-button> -->
            <el-button size="mini" @click="searchingBtn()">
              <i class="el-icon-search"></i>
              搜索
            </el-button>
          </div>
        </el-form>
      </div>
      <el-container>
        <el-aside v-if="VideoPhotoData.uploadDiaplay" width="200px" style="height: 60%">
          <UploadImg
            @labelDisabled="imgDisabled"
            @thresholdChange="thresholdChange"
            @searchStart="searchStart"
            @closeAsider="closeAsider"
            style="margin-top: 10px"
            :uploadImgs="editImg"
          />
          <!-- <div class="aside_box" v-show="!VideoPhotoData.uploadDiaplay">
            <el-form ref="form" :model="form" label-width="80px">
              <div class="comparison_box">
                <span>对比阈值</span>
                <div class="block" style="width: 50%;">
                  <el-slider v-model="sliderValue" input-size="mini"></el-slider>
                </div>
                <el-input-number size="mini" style="width: 31%;" v-model="sliderValue" controls-position="right" :min="0"
                  :max="100"></el-input-number>
              </div>
              <div class="select_library">
                <el-select collapse-tags style="width: 100%;" v-model="tagValues" multiple placeholder="请选择底库">
                  <el-option v-for="item in VideoPhotoData.tabs" :key="item.key" :label="item.label" :value="item.title">
                  </el-option>
                </el-select>
              </div>
              <div class="search_con">
                <el-autocomplete style="width: 100%;" class="inline-input" v-model="searchCon"
                  :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
              </div>
              <div class="block">
                <el-date-picker  size="mini"
              v-model="searchTime"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 100%;height:32px; min-width: 200px;background:#36596F">
                </el-date-picker>
              </div>
              <div>
                <el-select style="width: 100%;" v-model="taskValues" multiple placeholder="请选择场景">
                  <el-option v-for="item in VideoPhotoData.tasks" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-input v-model="inputName" placeholder="请输入姓名"></el-input>
              </div>
              <div>
                <el-select v-model="gender" style="width: 100%;" placeholder="请选择性别">
                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-select v-model="gender" style="width: 100%;" placeholder="请选择标签">
                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-select v-model="alarmValues" multiple @change="searchingBtn" :disabled="isDisabled" collapse-tags
                  size="mini" style="width: 100%; min-width: 120px" placeholder="请选择事件等级">
                  <el-option v-for="item in VideoPhotoData.dictionary.ALARMLEVEL" :key="item.id" :label="item.name"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </el-form>
          </div> -->
          <!-- <div class="aside_bottom" v-show="!VideoPhotoData.uploadDiaplay">
            <el-button>重置</el-button>
            <el-button @click="searchingBtn">搜索</el-button>
          </div> -->
        </el-aside>
        <el-main>
          <div class="main_list">
            <div class="image_card" v-for="(item, index) in VideoPhotoData.cards" :key="index">
              <!-- 层叠图片 -->
              <div class="image_card_rotate">
                <el-image
                  :src="'/httpImage/' + item.list[0].targetInfo[0].picSmUrl"
                  fit="cover"
                >
                </el-image>

              </div>
              <div class="image_card_rotate">
                <el-image
                  :src="'/httpImage/' + item.list[0].targetInfo[0].picSmUrl"
                  fit="cover"
                >
                </el-image>

              </div>
              <div class="masterMap">
                <p class="address">
                  {{ item.activeObject.cameraAddr.split("/")[0] }}
                </p>
                <div class="image_box">
                  <el-image
                    @click="rightBlock2(item, index)"
                    :src="'/httpImage/' + item.list[0].targetInfo[0].picSmUrl"
                    fit="cover"
                  >
                  </el-image>
                </div>
                <p>
                  <span>陌生人</span>
                  <span style="text-align: right;">{{ item.list[0].picDate }}</span>
                </p>
              </div>
            </div>
            <!-- <el-card class="box-card" v-for="(item, index) in VideoPhotoData.cards" :key="index">
              <div class="box-card_border">
                <div class="box-card_top" v-if="!VideoPhotoData.isComparison">
                  <div class="card_left">
                    <el-image
                      @click="rightBlock2(item, index)"
                      :src="'/httpImage/' + item.list[0].targetInfo[0].picSmUrl"
                      fit="cover"
                    >
                    </el-image>
                  </div>
                  <div class="card_right">
                    <h3 v-if="!VideoPhotoData.uploadType">{{ item.list[0].cameraName }}</h3>
                    <h3 v-if="VideoPhotoData.uploadType">{{ item.list[0].compareScore }} %</h3>
                    <h4>{{ item.list[0].picDate }}</h4>
                    <p v-if="VideoPhotoData.uploadType">{{ item.list[0].cameraAddr }}</p>
                    <p>{{ item.list[0].taskName }}&nbsp;&nbsp;{{ item.list[0].alarmRules[0].alarmLevel }}</p>
                    
                    <el-tooltip class="item" effect="dark" :content="item.list[0].showLabels" placement="top">
                      <p style="width: 12em;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">{{ item.list[0].showLabels }}</p>
                    </el-tooltip>
                  </div>
                </div>
                <div class="box-card_top" v-if="VideoPhotoData.isComparison">
                  <div class="comparison_card_left">
                    <div class="snap-image-box">
                      <el-image :src="'/httpImage/' + item.list[0].targetInfo[0].picSmUrl" class="img-left"></el-image>
                      <el-image :src="'/httpImage/' + item.list[0].targetInfo[0].picSmUrl" class="img-right"></el-image>
                      <div class="radio-view">{{ item.list[0].baseInfo[0].compareScore.toFixed(2) }}%</div>
                    </div>
                  </div>
                  <div class="card_right">
                    <h3 v-if="!VideoPhotoData.uploadType">{{ item.list[0].cameraAddr }}</h3>
                    <h3 v-if="VideoPhotoData.uploadType">{{ item.list[0].compareScore }} %</h3>
                    <h4>{{ item.list[0].picDate }}</h4>
                    <p v-if="VideoPhotoData.uploadType">{{ item.list[0].cameraAddr }}</p>
                    <p>{{ item.list[0].taskName }}&nbsp;&nbsp;{{ item.list[0].alarmRules[0].alarmLevel }}</p>
                    <p>{{ item.list[0].showLabels }}</p>
                  </div>
                </div>
                <div class="box-card_bottom">
                  <el-button style="color: #fff" size="mini" @click="rightBlock2(item, index)" type="text"
                    ><i class="el-icon-s-claim"></i>详情</el-button
                  >
                  |
                  <el-button style="color: #fff" size="mini" type="text" :disabled="true"><i class="el-icon-s-claim"></i>收藏</el-button>
                  |
                  <el-button style="color: #fff" size="mini" type="text" @click="searchUser(item,index)"
                    ><i class="el-icon-s-claim"></i>查找此人</el-button
                  >
                  |
                  <el-button style="color: #fff" size="mini" type="text" @click="addPedestal(item,index)"
                    ><i class="el-icon-s-claim"></i>加入底库</el-button
                  >
                </div>
              </div>
            </el-card> -->
          </div>

          <div class="btn-pager">
            <PagerView
              class="page"
              layout="sizes, prev, pager, next"
              :pager-options="productPagerOptions"
              :pageSizes="VideoPhotoData.pageSizeOption"
              @current-change="currentProductHandler"
              @size-change="productChangeHandler"
            />
          </div>
        </el-main>
      </el-container>
    </div>
    <!-- 预览图片 -->
    <PreviewImageDialog :edit-common-config="editConfig" />
  </div>
</template>

<script>
import getVideoPhoto from "@/components/searching/Pool/VideoPhotoData"
import UploadImg from "@/components/searching/UploadImg"
import { findPersonByPic } from "@/api/statisticsQueryManage/statisticsQueryManage.js"
import PreviewImageDialog from "@/views/panoramicData/components/PreviewImageDialog"
export default {
  name: "statisticsQueryPage",
  mixins: [getVideoPhoto],
  props: {},
  components: {
    UploadImg,
    PreviewImageDialog
  },
  data() {
    return {
      isShowPedestal: true,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      sliderValue: 25,
      options1: [
        {
          value: "0",
          label: "男"
        },
        {
          value: "1",
          label: "女"
        },
        {
          value: "2",
          label: "未知"
        }
      ],
      gender: "",
      tags: "",
      tagValues: [],
      searchCon: "",
      restaurants: [],
      selectDate: "",
      inputName: "",
      productPagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      userImgList: [],
      taskValues: [],
      typeDisable: false,
      alarmValues: [],
      isDisabled: false,

      // searchTime:[
      //   "2022-11-09 00:00:00",
      //   "2024-01-09 16:28:05",
      // ],
      searchTime: [],
      // searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")],
      alarmlevel: [],
      searchText: "",
      pageSizes: [30, 60, 120],
      editConfig: {
        visible: false,
        infomation: [],
        personIndex: 0,
        currentId: "",
        isLookImg: false,
        tabs: []
      },
      tabs: [],
      editImg: {
        isUploadImg: true,
        resReady: false,
        realSmallPath: [],
        imageUrl: ""
      },
      snapTime: "",
      thatSortList: "desc",
      sortList: [
        {
          label: "按时间正序",
          sort: "asc"
        },
        {
          label: "按时间倒序",
          sort: "desc"
        }
      ]
    }
  },
  created() {
    if (this.$route.params.userInfo) {
      console.log("have-data")
      this.editImg.isUploadImg = false
      this.editImg.resReady = true
      this.editImg.imageUrl = this.$route.params.userInfo.personPicUrl
      this.editImg.realSmallPath = [this.$route.params.userInfo.personPicUrl, "", ""]
      this.VideoPhotoData.uploadDiaplay = true
      this.searchImgs()
    } else {
      console.log("null-data")
      this.searchingBtn()
      this.clearSearch()
    }
    this.VideoPhotoData.page = 1
    this.VideoPhotoData.size = 30
    this.queryTagList() //底库列表
    this.queryDictionary()
    // this.searchTime = [this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD HH:mm:ss'), this.$moment().format("YYYY-MM-DD HH:mm:ss")]
    // this.VideoPhotoData.searchTime = this.searchTime
  },
  watch: {},
  computed: {
    breadcrumbRoutes() {
      return this.$route.matched // 获取当前路由的所有嵌套路径段
    }
  },
  mounted() {},
  methods: {
    closePedestal(done) {
      done()
    },
    getData() {
      this.searchingBtn()
    },
    // 抓拍数据
    rightBlock2(data, index) {
      console.log(data, "data")
      this.editConfig.isLookImg = true
      let sanpObj = this.VideoPhotoData.cards[index].activeObject
      this.editConfig.infomation = this.VideoPhotoData.cards
      this.editConfig.documentNumber = sanpObj.documentNumber
      this.editConfig.currentId = sanpObj.id
      this.editConfig.personIndex = index
      this.editConfig.visible = true
    },
    // 查找此人
    searchUser(item) {
      this.editImg.isUploadImg = false
      this.editImg.resReady = true
      this.editImg.imageUrl = item.activeObject.targetInfo[0].picSmUrl
      this.editImg.realSmallPath = [item.activeObject.targetInfo[0].picSmUrl, "", ""]
      this.VideoPhotoData.uploadDiaplay = true

      let param = {
        page: this.VideoPhotoData.page,
        size: this.VideoPhotoData.size,
        searchTime: [
          this.$moment(new Date()).subtract(1, "months").format("YYYY-MM-DD HH:mm:ss"),
          this.$moment().format("YYYY-MM-DD HH:mm:ss")
        ],
        alarmlevel: this.VideoPhotoData.queryAlarmlevel,
        inputValue: this.VideoPhotoData.inputValue,
        tasks: this.VideoPhotoData.queryTabs,
        compTargetType: 1,
        treeNodes: this.VideoPhotoData.treeNodes,
        picUrl: item.activeObject.targetInfo[0].picSmUrl,
        compTargetId: item.activeObject.id,
        // databases: ["esData"],
        threshold: 60
      }
      this.searchUserImg(param)
    },
    // 加入底库
    addPedestal(item) {
      this.editConfig.isLookImg = false
      this.editConfig.currentId = item.list[0].id
      this.editConfig.visible = true
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSelect(item) {
      console.log(item)
    },
    clearSearch() {
      this.tagValues = []
      this.taskValues = []
      this.collection = ""
      this.alarmValues = []
      this.VideoPhotoData.queryTabs = []
      this.VideoPhotoData.queryTasks = []
      this.VideoPhotoData.queryAlarmlevel = []
      this.VideoPhotoData.searchTime = this.getDateInit()
      this.VideoPhotoData.inputValue = ""
      this.VideoPhotoData.collection = ""
      this.searchTime = this.getDateInit()
      this.searchText = ""
      this.gender = ""
      this.VideoPhotoData.page = 1
      if (!this.VideoPhotoData.uploadType) {
        this.setLoadSearch(this.querySearchList())
      } else {
        this.setLoadSearch(this.findPersonByPage())
      }
    },
    getDateInit() {
      // 要求 默认一个月
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
    },
    searchingBtn(val) {
      this.VideoPhotoData.thatSortList = this.thatSortList
      this.VideoPhotoData.queryTabs = this.tagValues
      //处理搜索类型
      var tempArr = this.taskValues.map((task) => task.split(","))
      var tasks = []
      tempArr.forEach((arr) => {
        tasks = tasks.concat(arr)
      })
      this.VideoPhotoData.queryTasks = tasks
      this.VideoPhotoData.page = val ? val : 1
      this.VideoPhotoData.queryAlarmlevel = this.stringToNum()
      // // this.VideoPhotoData.searchTime = diffTime(this.searchTime)

      this.VideoPhotoData.inputValue = this.searchText
      this.VideoPhotoData.showType = this.showType
      this.VideoPhotoData.collection = this.collection
      if (!this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.uploadDiaplay = false
        this.setLoadSearch(this.querySearchList())
      } else {
        this.setLoadSearch(this.findPersonByPage())
      }
    },
    stringToNum() {
      var arr = []
      this.alarmValues.forEach((element) => {
        if (element == "-1") {
          arr.push(-1)
        }
        if (element == "1") {
          arr.push(1)
        }
        if (element == "2") {
          arr.push(2)
        }
        if (element == "3") {
          arr.push(3)
        }
        if (element == "4") {
          arr.push(4)
        }
        if (element == "5") {
          arr.push(5)
        }
      })
      return arr
    },
    setLoadSearch(fn) {
      fn.then((res) => {
        console.log(res, "ress")
      })
    },

    httpImage(url) {
      if (!url.length) {
        return ""
      }
      // "/httpImage/"
      return "http://" + url + (url.indexOf("?") >= 0 ? "&" : "?") + "width=160"
    },
    formatDateTime(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, "0")
      const day = String(date.getDate()).padStart(2, "0")
      const hours = String(date.getHours()).padStart(2, "0")
      const minutes = String(date.getMinutes()).padStart(2, "0")
      const seconds = String(date.getSeconds()).padStart(2, "0")

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    showUpload() {
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay
      //初始化数据
      this.clearStatus()
      if (!this.VideoPhotoData.uploadDiaplay) {
        // this.searchingBtn()
      }
    },
    searchStart(displayUpload, picUrl, compareTabs) {
      this.VideoPhotoData.uploadType = true
      this.VideoPhotoData.picUrl = picUrl
      this.VideoPhotoData.compareTabs = compareTabs
      this.VideoPhotoData.showType = "findByPic"
      if (displayUpload) {
        this.findPerson()
      } else {
        this.findPerson2()
      }
    },
    imgDisabled(data) {
      this.isDisabled = data
    },
    thresholdChange(value) {
      this.VideoPhotoData.threshold = value
    },
    productChangeHandler(val) {
      this.VideoPhotoData.size = val
      this.searchingBtn()
    },
    currentProductHandler(val) {
      this.VideoPhotoData.page = val
      this.searchingBtn(this.VideoPhotoData.page)
    },
    selectTime(val) {
      console.log(val, "val")
    },
    closeAsider() {
      this.VideoPhotoData.uploadDiaplay = false
      this.VideoPhotoData.uploadType = false
      this.clearSearch()
    },
    // 选择底库
    tagChange(e) {
      this.searchingBtn()
      console.log(e)
    },
    // 图搜图
    async searchImgs() {
      var param = {
        page: this.VideoPhotoData.page,
        size: this.VideoPhotoData.size,
        // searchTime:[this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD HH:mm:ss'), this.$moment().format("YYYY-MM-DD HH:mm:ss")],
        // alarmlevel: this.VideoPhotoData.queryAlarmlevel,
        // inputValue: this.VideoPhotoData.inputValue,
        tasks: this.VideoPhotoData.queryTabs,
        compTargetType: 0,
        // treeNodes: this.VideoPhotoData.treeNodes,
        picUrl: this.$route.params.userInfo.personPicUrl,
        compTargetId: this.$route.params.userInfo.id,
        // databases: ["esData"],
        threshold: 60
        // isAll: this.VideoPhotoData.searchFrom == "cluster" ? true : false
      }
      const rsp = await findPersonByPic(param)
      this.VideoPhotoData.cards = []
      if (rsp && rsp.success) {
        rsp.data.totalList.forEach((element) => {
          var obj = {
            activeObject: element,
            list: []
          }
          element.ownerPage = this.VideoPhotoData.page
          obj.list.push(element)
          this.VideoPhotoData.cards.push(obj)
        })
        this.VideoPhotoData.total = rsp.data.total
        this.productPagerOptions.totalCount = rsp.data.total
        this.VideoPhotoData.compareNum = rsp.data.compareNum
        this.isCardShow = false
        this.$nextTick(() => {
          this.isCardShow = true
          this.$forceUpdate()
        })
      }
    },
    // 查找此人
    async searchUserImg(param) {
      const rsp = await findPersonByPic(param)
      this.VideoPhotoData.cards = []
      if (rsp && rsp.success) {
        rsp.data.totalList.forEach((element) => {
          var obj = {
            activeObject: element,
            list: []
          }
          element.ownerPage = this.VideoPhotoData.page
          obj.list.push(element)
          this.VideoPhotoData.cards.push(obj)
        })
        this.VideoPhotoData.total = rsp.data.total
        this.productPagerOptions.totalCount = rsp.data.total
        this.VideoPhotoData.compareNum = rsp.data.compareNum
        this.isCardShow = false
        this.$nextTick(() => {
          this.isCardShow = true
          this.$forceUpdate()
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  width: 100%;
  overflow: hidden;
  height: calc(100vh - 50px);

  .con {
    .header {
      // width: 100%;
      height: 80px;
      background-color: #141415;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header_left {
        width: 300px;
        height: 50px;
        margin-left: 5px;

        h3 {
          margin: 0 0 10px 0;
          color: #fff;
          font-size: 30px;
        }

        .el-breadcrumb {
          color: #fff;
        }
      }

      .header_right {
        color: #fff;
        margin-right: 20px;
      }
    }

    .el-container {
      height: calc(100vh - 50px);
      background-color: #141415;

      .el-aside {
        width: 300px ;
        box-sizing: border-box;
        height: unset ;
        height: 60% !important;
        // padding:10px;
        margin: 10px;
        background-image: url("@/assets/images/background_aside.jpg");
        background-size: 100% 100% !important;
        // background-size: contain;
        background-repeat: no-repeat;
        /* 不重复背景图片 */

        .aside_box {
          margin: 20px 10px 10px 10px;
          padding: 10px;
          background-color: #1f465f;
          border-radius: 4px;
          height: 65%;

          .el-form {
            display: flex;
            align-content: space-around;
            justify-content: center;
            flex-wrap: wrap;
            height: 100%;
            color: #ffffff;
            div {
              width: 100%;
            }
          }

          .aside_box-top {
            .el-image {
              width: 100%;
            }
          }

          .aside_box_imgs {
            display: flex;
            justify-content: space-between;
          }

          .comparison_box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-input-number {
              // padding: 0;
              // padding-left:15px
            }

            span {
              font-size: 12px;
            }
          }
        }
      }

      .el-main {
        padding: 0px;
        // padding-right: 20px;
        // display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: flex-start;
        // height: calc(100% - 100px);

        .main_list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          // justify-content: space-around;
          height: 73%;
          margin-bottom:82px;
          overflow: auto;
          .image_card {
            width: 16%;
            height: 230px;
            margin-top: 10px;
            overflow: hidden;
            // background-color: pink;
            position: relative;
            cursor: pointer;
            .image_card_rotate {
              // position: absolute;
              // left: 0px;
              // top: 56.03px;
              position: absolute;
              right: 0px;
              bottom: 0px;
              width: 195px;
              height: 200px;
              transform: rotate(-16.63deg);
              opacity: 1;
              filter: opacity(0.5);

              box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.3);
            }
            .image_card_rotate:nth-of-type(2) {
              // position: absolute;
              // right: 0px;
              // top: 37.81px;
              position: absolute;
              right: 0px;
              bottom: 0px;
              width: 195px;
              height: 200px;
              transform: rotate(-8.22deg);
              opacity: 1;
              filter: opacity(0.699999988079071);

              box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.3);
            }
            .masterMap {
              position: absolute;
              right: 0px;
              bottom: 0px;
              width: 195px;
              height: 200px;
              border-radius: 8px;
              overflow: hidden;
              opacity: 1;
              // background: rgba(49, 49, 49, 0.8);
              background: #2E5EAB;
              box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
              .image_box{
                width:100%;
                height: 146px;
                .el-image {
                  // position: relative;
                  width:100%;
                  height: 100%;
                }
              }
              p {
                font-size: 12px;
                height: 28px;
                line-height: 28px;
                // background: rgba(49, 49, 49, 0.8);
                opacity: 1;
                width: 195px;
                box-sizing: border-box;
                // position: absolute;
                margin: 0px;
                padding:0px 20px;
                span {
                  display: inline-block;
                  width: 50%;
                }
              }
              // p:nth-of-type(1) {
              //   left: 0px;
              //   top: 0px;
              // }
              // p:nth-of-type(2) {
              //   left: 0px;
              //   bottom: 0px;
              // }
            }
          }
          .tn-pager {
            height: 20%;
          }
        }
      }
    }
  }

  .selectList {
    background: #141415;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 30px;

    .el-form {
      display: flex;
      flex-wrap: wrap;

      .el-input {
        width: 150px;
        margin-right: 10px;
        margin-bottom: 5px;
      }

      .el-select {
        width: 150px;
        margin-bottom: 5px;
        margin-right: 10px;
      }

      .el-autocomplete {
        width: 150px;
        margin-bottom: 5px;
        margin-right: 10px;
      }
    }
  }
}
::v-deep {
  input {
    border: none;
  }
  .el-input__inner {
    border: none;
  }
  .search_con {
    height: 32px !important;
    display: flex;
    button {
      height: 32px !important;
      line-height: 6px;
      // border-top-right-radius: 0px;
      // border-bottom-right-radius: 0px;
    }
    input {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border: none;
    }
  }
  .el-pagination__jump {
    color: #fff;
  }
  .el-pagination__total {
    color: #fff;
  }
  .el-pagination__sizes {
    .el-select {
      .el-input--suffix {
        .el-input__inner {
          background: #1f2935 !important;
          color: #ffffff !important;
        }
      }
    }
  }
  .aside_bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    margin-right: 200px;

    .el-button {
      border-radius: 60px;
      opacity: 1;
      color: #01c2ff;
      background: rgba(10, 26, 52, 0.6);
      border: 1px solid rgba(89, 175, 249, 0.7049);
      box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
    }
  }
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background-color: #1f2935;
    color: #ffffff;
  }
  .el-breadcrumb__inner {
    color: #ccc !important;
  }

  // .el-main
  .el-card__body {
    width: 100%;
    padding: 10px 10px 0px 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;

    .box-card_top {
      width: 100%;
      display: flex;

      .card_left {
        width: 45%;
      }
      .comparison_card_left {
        width: 60%;
      }
      .card_right {
        width: 55%;
      }
    }

    .box-card_bottom {
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  .selectList{
    .el-input {
      input {
        height: 32px !important;
      }

      .el-input__inner {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
      }
    }

  }

  .el-input-number__increase,
  .el-input-number__decrease {
    background-color: unset;
    color: #fff;
  }

  .el-scrollbar__view {
    background-color: #36596f;
  }

  .el-range-input {
    background: #2c2c2d;
    color: #fff;
  }
  .el-date-editor--datetimerange.el-input__inner {
    width: 220px;
  }
}

::v-deep .el-tag.el-tag--info {
  background-color: #5e6b79;
  border-color: #5e6b79;
  color: rgba(255, 255, 255, 0.9);
}
::v-deep .el-button--text {
  color: #ccc !important;
}
::v-deep .footer_button {
  position: absolute;
  bottom: 40px;
  right: 60px;
}
::v-deep .el-checkbox > span {
  color: #fff;
  font-size:16px;
}

.btn-pager {
    width: calc(100% - 40px);
    justify-content: left;
    position:relative;
  }
</style>
